<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>


<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">


<head>
    <title>JPetStore Demo</title>
    <link rel="StyleSheet" href="css/mypetstore.css" type="text/css" media="screen" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

</head>

<body>

<div id="Header">

    <div id="Logo">
        <div id="LogoContent">
            <a href="MainForm"><img src="images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <a href="cartForm"><img align="middle" name="img_cart" src="images/cart.gif" /></a>
            <img align="middle" src="images/separator.gif" />
            <c:if test="${sessionScope.loginAccount == null}">
                <a href="signonForm">Sign In</a>
                <img align="middle" src="images/separator.gif" />
            </c:if>
            <c:if test="${sessionScope.loginAccount != null}">
                <a href="signOutServlet">Sign Out</a>
                <img align="middle" src="images/separator.gif" />
                <a href="myAccountFormServlet">My Account</a>
                <img align="middle" src="images/separator.gif" />
            </c:if>


            <a href="help.html">?</a></div>
    </div>

    <div id="Search">
        <div >
            <form action="SearchServlet" method="get">
                <input type="text" name="keyword" id="keyword"size="14"oninput="getSuggestions(this.value)">


                <input type="submit" value="search"id="a1" class="search1">


            </form>



           


        </div>
    </div>
    <div> <ul id="suggestions"class="suggestions-list">

    </ul></div>





    <script>
        function getSuggestions(query) {

            $.ajax({
                url: 'SearchSuggestionServlet', // 后端处理搜索请求的Servlet
                method: 'GET',

                data: { query: query },
                success: function(data) {
                    displaySuggestions(data);
                }
            });

        }

        function displaySuggestions(suggestions) {
            // 如果 suggestions 不是数组，尝试将其解析为 JSON
            if (!Array.isArray(suggestions)) {
                try {
                    suggestions = JSON.parse(suggestions);
                } catch (error) {
                    console.error("Error parsing suggestions:", error);
                    return;
                }
            }

            var suggestionsList = document.getElementById('suggestions');
            suggestionsList.innerHTML = '';

            suggestions.forEach(function(suggestion) {
               if(suggestion!=0)
               {
                   var listItem = document.createElement('li');
                   listItem.textContent = suggestion;
                   listItem.addEventListener('click', function() {
                       // 将提示内容设置为输入框的值
                       document.getElementById('keyword').value = suggestion;

                       // 清空提示框
                       suggestionsList.innerHTML = '';
                   });
                   suggestionsList.appendChild(listItem);
               }

            });
        }
    </script>


<%--    <div id="QuickLinks">--%>
<%--        <a href="categoryForm?categoryId=FISH"><img src="images/sm_fish.gif" /></a>--%>
<%--        <img src="images/separator.gif" />--%>
<%--        <a href="categoryForm?categoryId=DOGS"><img src="images/sm_dogs.gif" /></a>--%>
<%--        <img src="images/separator.gif" />--%>
<%--        <a href="categoryForm?categoryId=REPTILES"><img src="images/sm_reptiles.gif" /></a>--%>
<%--        <img src="images/separator.gif" />--%>
<%--        <a href="categoryForm?categoryId=CATS"><img src="images/sm_cats.gif" /></a>--%>
<%--        <img src="images/separator.gif" />--%>
<%--        <a href="categoryForm?categoryId=BIRDS"><img src="images/sm_birds.gif" /></a>--%>
<%--    </div>--%>
    <%--    <div id="QuickLinks"><stripes:link--%>
    <%--            beanclass="org.mybatis.jpetstore.web.actions.CatalogActionBean"--%>
    <%--            event="viewCategory">--%>
    <%--        <stripes:param name="categoryId" value="FISH" />--%>
    <%--        <img src="../images/sm_fish.gif" />--%>
    <%--    </stripes:link> <img src="../images/separator.gif" /> <stripes:link--%>
    <%--            beanclass="org.mybatis.jpetstore.web.actions.CatalogActionBean"--%>
    <%--            event="viewCategory">--%>
    <%--        <stripes:param name="categoryId" value="DOGS" />--%>
    <%--        <img src="../images/sm_dogs.gif" />--%>
    <%--    </stripes:link> <img src="../images/separator.gif" /> <stripes:link--%>
    <%--            beanclass="org.mybatis.jpetstore.web.actions.CatalogActionBean"--%>
    <%--            event="viewCategory">--%>
    <%--        <stripes:param name="categoryId" value="REPTILES" />--%>
    <%--        <img src="../images/sm_reptiles.gif" />--%>
    <%--    </stripes:link> <img src="../images/separator.gif" /> <stripes:link--%>
    <%--            beanclass="org.mybatis.jpetstore.web.actions.CatalogActionBean"--%>
    <%--            event="viewCategory">--%>
    <%--        <stripes:param name="categoryId" value="CATS" />--%>
    <%--        <img src="../images/sm_cats.gif" />--%>
    <%--    </stripes:link> <img src="../images/separator.gif" /> <stripes:link--%>
    <%--            beanclass="org.mybatis.jpetstore.web.actions.CatalogActionBean"--%>
    <%--            event="viewCategory">--%>
    <%--        <stripes:param name="categoryId" value="BIRDS" />--%>
    <%--        <img src="../images/sm_birds.gif" />--%>
    <%--    </stripes:link></div>--%>

</div>

<div id="Content">



